<template>
    <div class="bg-gray-50 overflow-scroll rounded-lg ">
        <div class="w-full mt-4">
            <div class="flex justify-between">
                <div class="w-[90%] flex space-x-2 justify-center mb-4">
                    <div v-for="(item, index) in category" :key="index">
                        <div :class="ClassChoice === item.id ? 'true' : 'false'" class="w-10 text-center">
                            <button @click="ClassChoice = item.id">{{ item.title }}</button>
                        </div>
                    </div>
                </div>
                <button @dblclick="PushInPlayList"
                    class="mr-4 h-8 rounded-xl bg-gray-300 font-bold px-3 leading-8">播放全部</button>
            </div>
            <div class="flex h-[3.5rem] leading-[3.5rem] bg-gray-100">
                <div class="w-4 ml-2 text-center"></div>
                <div class="w-[26%] ml-4">
                    <a>名称</a>
                </div>
                <div class="w-[20%] ml-[3.5rem]">
                    <p>艺术家</p>
                </div>
                <div class="w-[30%] ml-3">
                    <p>专辑</p>
                </div>
                <div class="w-[10%] ml-2">
                    <p>时长</p>
                </div>
            </div>
            <div v-for="item, index in musicdata.slice(page * 20, page * 20 + 20)" :key="index" v-if="!pending"
                class="flex justify-between h-14 leading-[3.5rem] py-2 hover:bg-gray-200  text-gray-500 overflow-hidden text-ellipsis text-sm even:bg-gray-100">
                <div class="w-4 ml-2 text-center">{{ page * 20 + index + 1 }}</div>
                <div class="flex w-[30%]">
                    <div class="w-12 h-12 bg-cover rounded-sm flex justify-center items-center"
                        :style="`background-image: url('${item.album.picUrl}')`"></div>
                    <p class="pl-2">{{ item.name }}</p>
                </div>
                <div class="w-[20%]">
                    <p>{{ item.artists[0].name }}</p>
                </div>
                <div class="w-[30%]">
                    <p>{{ item.album.name }}</p>
                </div>
                <div>
                    <p class="w-[10%]">{{ item.lMusic ? setTime(item.lMusic.playTime) :
                        setTime(item.mMusic ? item.mMusic.playTime : '') }}</p>
                </div>
                <div class="flex w-[10%]"></div>
            </div>
            <div class="flex w-60 ml-[40%]">
                <div v-for="item, index in pagechoice" class="bg-gray-300 mt-4">
                    <div class="w-10 leading-8  px-4  rounded-md"
                        :style="`${index === page ? 'background-color:#777;' : ''}`" @click="page = index">
                        {{ item.title
                        }}
                    </div>
                </div>
            </div>
            <div class="h-4">
            </div>
        </div>
    </div>
</template>
<script setup>
// 导入数据
import { ref, watch, onMounted } from 'vue';
import { setTime } from '~~/hook/format';
import { usePlayStore } from '~~/store';
const store = usePlayStore()
const router = useRoute()
// 新歌类别
const category = [
    { title: '全部', id: 0 },
    { title: '华语', id: 7 },
    { title: '欧美', id: 96 },
    { title: '日本', id: 8 },
    { title: '韩语', id: 16 },
];
const pagechoice = [
    { title: 1 },
    { title: 2 },
    { title: 3 },
    { title: 4 },
    { title: 5 }
]
const page = ref(0)
const ClassChoice = ref(1);
const { data, pending, refresh } = await useAsyncData('albumInfo', (() => $fetch(`/api/music/getNewMusic?type=${ClassChoice.value}`)))
const musicdata = ref(data.value.data)
// 新歌类别设置
watch(ClassChoice, async (newvalue, oldvalue) => {
    if (newvalue != oldvalue) {
        page.value = 0;
        musicdata.value = data.value.data
        refresh();
    }
});
const PushInPlayList = function () {
    let arr = []
    if (data.value) {
        for (let i = 0; i < data.value.data.length; i++) {
            let tempdata = {
                cover: data.value.data[i].album.picUrl,
                name: data.value.data[i].name,
                id: Number(data.value.data[i].id),
                album: data.value.data[i].album.name,
                dt: data.value.data[i].lMusic?.playTime || data.value.data[i].mMusic?.playTime,
                singer: data.value.data[i].artists[0].name
            }
            arr.push(tempdata)
        }
        store.$patch(() => {
            store.currentMusicIndex = 0;
            store.playList = arr;
            store.playStatus = true;
            store.currentId = data.value.data[0].id
        })
    }
}
</script>
<style lang="less">
.true {
    font-weight: 700;
    border-bottom: red solid 3px;
    font-size: medium;
    border-style: groove;
}

.false {
    font-weight: 500;
}
</style>
